<template>
    <div class="content">
        <Tabs v-model="name">
            <TabPane name="TrainingScore" label="实训成绩" />
            <TabPane name="TrainingView" label="实训案例" />
        </Tabs>
        <keep-alive>
            <component :is="name" :id="id" :training="training"></component>
        </keep-alive>
    </div>
</template>
<script>
import { queryTrainingInfo } from '@/api/trainingManage'

const TrainingScore = () => import('./training')
const Emergencies = () => import('./emergencies')
const TrainingView = () => import('./view')

export default {
    props: {
        id: {
            type: String,
            default: ''
        }
    },
    components: {
        Emergencies,
        TrainingScore,
        TrainingView
    },
    data () {
        return {
            name: 'TrainingScore',
            training: {}
        }
    },
    mounted () {
        this.id && this.queryInfo(this.id)
    },
    methods: {
        queryInfo (id) {
            queryTrainingInfo(id).then(res => {
                if (res.data.code === '0000') {
                    const data = res.data.data
                    data.classList = (data.classList || []).map(item => {
                        const { classId, className } = item
                        return { classId, className }
                    })
                    try {
                        data.weight = JSON.parse(data.weight)
                    } catch (error) {
                        data.weight = []
                    }
                    this.training = data
                }
            })
        }
    }
}
</script>
